﻿@{
    ViewBag.Title = "云清 - 留言簿";
    Layout = "~/Views/Shared/LayoutIndex.cshtml";
}
<link href="~/Content/css/message.css" rel="stylesheet" />
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="container-inner">
            <section class="msg-remark">
                <h1>留言板</h1>
                <p>
                    沟通交流，拉近你我！
                </p>
            </section>
            <div class="textarea-wrap message" id="textarea-wrap">
                <form class="layui-form blog-editor" action="">
                    <div class="layui-form-item">
                        <textarea name="editorContent" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交留言</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="f-cb"></div>
        <div class="mt20">
            <ul class="message-list" id="message-list">
                <li class="zoomIn article">
                    <div class="comment-parent">
                        <a name="remark-1"></a>
                        <img src="http://qzapp.qlogo.cn/qzapp/101871412/EE7AAE629D162B783C00149B4EDE3502/100" />
                        <div class="info">
                            <span class="username">冰</span>
                        </div>
                        <div class="comment-content">
                            大哥带一下
                        </div>
                        <p class="info info-footer">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <span>深圳</span>
                            <span class="comment-time">2020-07-01</span>
                            <a href="javascript:;" class="btn-reply" data-targetid="1" data-targetname="冰">回复</a>
                        </p>
                    </div>
                    <hr />
                    <div class="comment-child">
                        <a name="reply-1"></a>
                        <img src="http://www.lzqcode.com/uploads/userup/57/myface.png">
                        <div class="info">
                            <span class="username">小刘</span>
                            <span style="padding-right:0;margin-left:-5px;">回复</span>
                            <span class="username">冰</span>
                            <span>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或</span>
                        </div>
                        <p class="info">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <span>深圳</span>
                            <span class="comment-time">2018-01-01</span>
                            <a href="javascript:;" class="btn-reply" data-targetid="2" data-targetname="小刘">回复</a>
                        </p>
                    </div>
                    <div class="replycontainer layui-hide">
                        <form class="layui-form" action="">
                            <input type="hidden" name="remarkId" value="1">
                            <input type="hidden" name="targetUserId" value="0">
                            <div class="layui-form-item">
                                <textarea name="replyContent" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>
                            </div>
                        </form>
                    </div>
                </li>
                <li class="zoomIn article">
                    <div class="comment-parent">
                        <a name="remark-1"></a>
                        <img src="http://qzapp.qlogo.cn/qzapp/101871412/EE7AAE629D162B783C00149B4EDE3502/100" alt="{{name}}" />
                        <div class="info">
                            <span class="username">冰</span>
                        </div>
                        <div class="comment-content">
                            一天很短，开心了就笑，不开心了就过会儿再笑。
                        </div>
                        <p class="info info-footer">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <span>深圳</span>
                            <span class="comment-time">2018-01-01</span>
                            <a href="javascript:;" class="btn-reply" data-targetid="1" data-targetname="冰">回复</a>
                        </p>
                    </div>
                    <div class="replycontainer layui-hide">
                        <form class="layui-form" action="">
                            <input type="hidden" name="remarkId" value="1">
                            <input type="hidden" name="targetUserId" value="0">
                            <div class="layui-form-item">
                                <textarea name="replyContent" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>
                            </div>
                        </form>
                    </div>
                </li>
                <li class="zoomIn article">
                    <div class="comment-parent">
                        <a name="remark-1"></a>
                        <img src="http://www.lzqcode.com/uploads/userup/57/myface.png" />
                        <div class="info">
                            <span class="username">小刘</span>
                        </div>
                        <div class="comment-content">
                            哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或
                        </div>
                        <p class="info info-footer">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <span>深圳</span>
                            <span class="comment-time">2018-01-01</span>
                            <a href="javascript:;" class="btn-reply" data-targetid="1" data-targetname="小刘">回复</a>
                        </p>
                    </div>
                    <hr />
                    <div class="replycontainer layui-hide">
                        <form class="layui-form" action="">
                            <input type="hidden" name="remarkId" value="1">
                            <input type="hidden" name="targetUserId" value="0">
                            <div class="layui-form-item">
                                <textarea name="replyContent" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>
                            </div>
                        </form>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="#" class="qq" target="_blank"><i class="fa fa-qq"></i></a>
                    <a href="#" class="email" target="_blank"><i class="fa fa-envelope"></i></a>
                    <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2019-2020 ZQ博客 All Rights Reserved V.3.1.3 Power by ZQ博客
                </p>
            </div>
        </div>
    </div>
</footer>
<script>
    $(function () {
        var area;
        layui.use(['element', 'form', 'layedit', 'flow'], function () {
            var element = layui.element;
            var form = layui.form;
            var layedit = layui.layedit;
            var flow = layui.flow;
            //留言的编辑器
            var editIndex = layedit.build('remarkEditor', {
                height: 150,
                tool: ['face', '|', 'link'],
            });
            //留言的编辑器的验证
            form.verify({
                content: function (value) {
                    value = $.trim(layedit.getContent(editIndex));
                    if (value == "") return "请输入内容";
                    layedit.sync(editIndex);
                },
                replyContent: function (value) {
                    if (value == "") return "请输入内容";
                }
            });
            //回复按钮点击事件
            $('#message-list').on('click', '.btn-reply', function () {
                var targetId = $(this).data('targetid')
                    , targetName = $(this).data('targetname')
                    , $container = $(this).parent('p').parent().siblings('.replycontainer');
                if ($(this).text() == '回复') {
                    $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
                    $container.removeClass('layui-hide');
                    $container.find('input[name="targetUserId"]').val(targetId);
                    $(this).parents('.message-list li').find('.btn-reply').text('回复');
                    $(this).text('收起');
                } else {
                    $container.addClass('layui-hide');
                    $container.find('input[name="targetUserId"]').val(0);
                    $(this).text('回复');
                }
            });
        });

    })
</script>